{extend name="main"}
{block name="style"}
<style type="text/css">
.min-300px{min-width: 300px;}
</style>
{/block}
{block name="body"}
<div class="bg-white">
	<div class="table-responsive">
		<el-table
	      	:data="tableData"
    		stripe
    		v-loading="search.ajax"
    		style="width: 100%;">
	      <el-table-column
	        label="页面"
	       	width="260">
		      <template slot-scope="scope">
				<el-link 
				:href="'/client/editSeo/'+scope.row.api_id"
				:underline="false"
				target="_blank">{{scope.row.api_name}}</el-link>
		      </template>
	      </el-table-column>
	      <el-table-column
	        prop="seo_title"
	        label="SEO标题"
	        min-width="200">
	      </el-table-column>
	      <el-table-column
	        prop="api_keywords"
	        label="关键词"
	        min-width="200">
	      </el-table-column>
	      <el-table-column
	        prop="seo_description"
	        label="描述"
	        min-width="200">
	      </el-table-column>
	      <el-table-column
	        label="/"
	        width="80">
		      <template slot-scope="scope">
		        <el-button
		            type="primary"
		            size="minism"
		            @click="window.open('/client/editSeo/'+scope.row.api_id)">
		            编辑
		        </el-button>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[50,100,200]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			dialogVisible:false,
			search:{
				app_id:{$app_id},
				ajax:false,
				page:1,
				total:0,
				pageSize:50
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
		methods:{
			updateApiCacheAjax(){
		        this.$confirm('即将更新SEO缓存, 是否继续?', '提示', {
		          confirmButtonText: '继续',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/client/updateApiCacheAjax/'+this.search.app_id,function(ret) {
		    			loading.close();
		    			if(ret){
		    				if(ret.code === 0){
		    					XYBase.success(ret.msg);
		    				}else{
		    					XYBase.msg(ret.msg);
		    				}
		    			}else{
							XYBase.error(XYBase.config.system_network_error);
		    			}
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		if (_this.search.ajax)return;
	      		_this.search.ajax=true;
	      		_this.tableData=[];
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
		}
	});
</script>
{/block}